<template>
	<u-popup 
		v-model="md.show"
		:mode="'center'"
		:mask-close-able="false"
		:border-radius="10"
		:closeable="false"
		:negative-top="15"
		width="90%">
		<view class="my-model-content" v-if="isSelf">
			<slot>这是一个自定义的model弹框</slot>
		</view>
		
		<template v-else>
			<view class="mm-title">
				<slot name="mm-title" v-if="!title"></slot>
				<label v-else>{{title}}</label>
			</view>
			
			<view class="mm-cont">
				<slot name="mm-cont" v-if="!context"></slot>
				<view v-else>{{context}}</view>
			</view>
			
			<view class="mm-bottom" :style="{'justify-content': 'center'}">
				<view class="item" v-for="(btn, index) in btnList" :key="index">
					<u-button
						v-if="btn.openType"
						:size="'default'" 
						:hover-class="'none'"
						:custom-style="btn.sty" 
						:open-type="btn.openType"
						@click="btnClick(index)">
						{{btn.text}}
					</u-button>
					<u-button 
						v-else
						:size="'default'" 
						:hover-class="'none'"
						:custom-style="btn.sty" 
						@click="btnClick(index)">
						{{btn.text}}
					</u-button>
				</view>
			</view>
		</template>
	</u-popup>
</template>

<script>
	export default {
		name:"my-model",
		props: {
			// 是否自定义内容
			isSelf: {
				type: Boolean,
				default: false
			},
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 内容
			context: {
				type: String,
				default: ''
			},
			// 按钮数组
			btnList: {
				type: Array,
				default: function(){
					return [
						{text: '确定', sty: {'background': '#00c3ce', 'color': '#ffffff'}},
						{text: '取消', sty: {'background': '#ffffff', 'color': '#00c3ce'}},
					]
				}
			},
		},
		data() {
			return {
				md: {
					show: true
				}
			};
		},
		methods: {
			btnClick(index){
				this.$emit('btnClick', index);
			}
		},
	}
</script>

<style lang="scss">
.mm-title{
	padding: 20rpx 10rpx;
	border-bottom: 2rpx solid #efefef;
	text-align: center;
	font-size: 34rpx;
	font-weight: 600;
	color: #666;
}

.mm-cont{
	padding: 30rpx;
	min-width: 40vh;
	max-width: 90vh;
	font-size: 34rpx;
}

.mm-bottom{
	padding: 10rpx 10rpx 20rpx 10rpx;
	border-top: 2rpx solid #efefef;
	text-align: center;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.item{
		flex: 1;
		margin: 0rpx 2rpx;
	}
}
	
.my-model-content{
	max-width: 80vh;
}
</style>
